<template>
  <div>
    <!-- logo -->
    <div>
      <van-row type="flex" justify="center" class="logo-div">
        <van-col span="18">
          <p class="logo">环境@盒</p>
        </van-col>
      </van-row>
    </div>
    <!--  用户登录信息  -->
    <div class="user-security-info">
      <!--   用户账号   -->
      <van-row type="flex" justify="center" class="user-login-username">
        <van-col span="18">
          <div class="van-hairline--bottom">
            <van-field v-model="userMobile"
                       type="number"
                       placeholder="请输入手机号码"
                       v-bind:left-icon="mobilePhoneIcon"
                       icon="question"
            />
          </div>
        </van-col>
      </van-row>
      <!--   用户密码   -->
      <van-row type="flex" justify="center" class="user-login-passwd">
        <van-col span="18">
          <div class="van-hairline--bottom">
            <van-field v-model="userPasswd"
                       v-bind:type="showPassword"
                       placeholder="请输入密码"
                       v-bind:password="true"
                       v-bind:left-icon="passwdIcon"
                       v-bind:right-icon="showPasswdIcon"
                       icon="question"
                       @click-right-icon="showPasswordFunction"
            />
          </div>
        </van-col>
      </van-row>
      <!--   登录按钮   -->
      <sub-button btnText="登录" @click.native="login"></sub-button>
      <!--   注册-忘记密码   -->
      <van-row type="flex" justify="center" class="forget-passwd">
        <van-col span="11">
          <a href="register.html">账号注册></a>
        </van-col>
        <van-col span="2">
          <span>|</span>
        </van-col>
        <van-col span="11">
          <a href="forgetpasswd.html">忘记密码></a>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
  import {Toast} from 'vant';
  import SubButton from "@/components/SubButton";
  import {getUrlParam} from "@/util/GetUrlParam";

  export default {
    data() {
      return {
        mobilePhoneIcon: require("@/images/mobild-phone-icon@2x.png"),
        passwdIcon: require("@/images/passwd-icon@2x.png"),
        showPasswdIcon: require("@/images/show-passwd@2x.png"),
        smsCodeIcon: require("@/images/smscode-icon@2x.png"),
        showPassword: "password",
        passwordShow: true,
        userMobile: '',
        userPasswd: ''
      }
    },
    components: {
      SubButton
    },
    mounted() {
      //微信授权
      this.getAuth();
    },
    methods: {
      getAuth() { // 非静默授权，第一次有弹框
        let that = this;
        const code = getUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
        const local = window.location.href
        if (code == null || code === '') {
          that.$http.myGet('/wx/getAppId').then((response) => {
            window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + response.data + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
          }).catch(err => {
            console.log('/wx/getAppId 请求失败' + err)
          });
        } else {
          that.getUserInfo(code) //把code传给后台获取用户信息
        }
      },
      getUserInfo(code) { // 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口
        let that = this;
        that.$http.myGet('/wx/getUserInfo?code=' + code).then((response) => {
          if (response.data) {
            //获取用户信息
            let cook = that.$cookies.get(process.env.VUE_APP_COOKIE_USER_KEY);
            if (!cook) {
              cook = {};
            }
            cook['wxInfo'] = response.data;
            that.$cookies.set(process.env.VUE_APP_COOKIE_USER_KEY, cook, process.env.VUE_APP_COOKIE_EXPIRETIMES, "/", window.location.host);
          }
        }).catch(err => {
          console.log('/wx/getUserInfo 请求失败' + err)
        });
      },
      onClickLeft() {
        Toast('返回');
      },
      onClickRight() {
        Toast('按钮');
      },
      showPasswordFunction() {
        if (this.showPassword === "password") {
          this.showPassword = "text"
        } else {
          this.showPassword = "password"
        }
      },
      login() {
        let that = this;
        if (!that.userMobile) {
          this.$notify('请输入手机号');
          return;
        }
        if (!that.userPasswd) {
          this.$notify('请输入密码');
          return;
        }
        let cook = that.$cookies.get(process.env.VUE_APP_COOKIE_USER_KEY);
        let param = {
          phone: that.userMobile,
          password: that.userPasswd,
          openId: cook.wxInfo.openid,
          userType: 2
        }
        this.$http.restPost('/login.do', param).then(response => {
          if (response.data) {
            if (response.data.result > 0) {
              if (response.data.result === 2) {
                this.$notify('用户不存在');
                console.log('【账号：' + that.userMobile + '】用户不存在！')
              } else if (response.data.result === 3) {
                this.$notify('密码错误');
                that.userPasswd = '';
                console.log('【账号：' + that.userMobile + '】密码错误！')
              } else if (response.data.result === 4) {
                this.$notify('验证失败');
                console.log('【账号：' + that.userMobile + '】验证失败！')
              } else {
                console.log('【账号：' + that.userMobile + '】登录成功！')
                let cook = that.$cookies.get(process.env.VUE_APP_COOKIE_USER_KEY);
                if (!cook) {
                  cook = {};
                }
                cook['userInfo'] = response.data.user;
                cook['userInfo']['phone'] = that.userMobile;
                that.$cookies.set(process.env.VUE_APP_COOKIE_USER_KEY, cook, process.env.VUE_APP_COOKIE_EXPIRETIMES, "/", window.location.host);
                location.href = 'mydevice.html';
              }
            } else {
              console.log('【账号：' + that.userMobile + '】登录失败！')
              that.$notify('账号或密码错误');
            }
          }
        }).catch(err => {
          console.log('login.do 请求失败' + err)
        })
      }
    },
  }
</script>
<style lang="css" scoped>

  /* ⬇商标外框⬇ */
  .logo-div {
    margin: 110px 0 60px 0;
  }

  /* ⬇商标⬇ */
  .logo {
    text-align: center;
    line-height: 54px;
    font-size: 54px;
    font-weight: 200;
    font-family: PingFang SC;
    color: rgba(0, 0, 0, 1);
    background: linear-gradient(75deg, rgba(60, 180, 255, 1) 0%, rgba(45, 141, 251, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
  }

  /* ⬇注册-忘记密码⬇ */
  .forget-passwd > * {
    text-align: center;
  }

  .forget-passwd > * > * {
    font-size: 12.5px;
    color: #3198FC;
  }

  .forget-passwd > :first-child {
    text-align: right;
  }

  .forget-passwd > :last-child {
    text-align: left;
  }

  /* ⬇用户信息的块⬇ */
  .user-security-info > * {
    /*margin-bottom: 20px;*/
  }

  /* ⬇用户账号⬇ */
  .user-login-username {
    margin-bottom: 20px;
  }

  /* ⬇用户密码⬇ */
  .user-login-passwd {
    margin-bottom: 40px;
  }
</style>
